<template>
  <div class="main_top">
    <div class="main_top_left">
      <div class="main_top_left_top">
        <img src="../../../assets/001/main_top_left.png" />
        <div class="main_top_left_top_title">公开数据展示</div>
        <div class="main_top_left_top_con">
          <div class="main_top_left_top_con_list">
            <span class="main_top_left_c_l_n main_top_left_c_l_n1">0</span>
            <p>党务公开</p>
          </div>
          <div class="main_top_left_top_con_list">
            <span class="main_top_left_c_l_n main_top_left_c_l_n2">0</span>
            <p>政务公开</p>
          </div>
          <div class="main_top_left_top_con_list">
            <span class="main_top_left_c_l_n main_top_left_c_l_n3">0</span>
            <p>财务公开</p>
          </div>
          <div class="main_top_left_top_con_left">
            <div class="main_top_left_t_c_l_left">
              <span class="main_top_left_c_l_n main_top_left_c_l_n4">0</span>
              <p>村务公开</p>
            </div>
            <div class="main_top_left_t_c_l_right">
              <span class="main_top_left_c_l_n main_top_left_c_l_n5">0</span>
              <p>居务公开</p>
            </div>
          </div>
          <div class="main_top_left_top_con_right main_top_left_top_con_right2">
            <div class="main_top_left_t_c_r_left">
              <span class="main_top_left_c_l_n">0</span>
              <p>占位公开</p>
            </div>
            <div class="main_top_left_t_c_r_right">
              <span class="main_top_left_c_l_n">0</span>
              <p>占位公开</p>
            </div>
          </div>
        </div>
      </div>
      <div class="main_top_left_top main_top_left_bottom">
        <img src="../../../assets/001/main_top_left.png" />
        <div class="main_top_left_top_title">XX信息员添加数据展示</div>
        <div id="baseId" ref="baseChart" class="main_top_left_top_con"></div>
      </div>
    </div>
    <div class="main_top_middle">
      <div class="main_top_middle_top_title">
        <img class="title_bg" src="../../../assets/001/title_bg.png" />
        政务服务大数据可视化监管平台
        <a class="title_web" href="#" target="blank">管理系统</a>
        <a class="title_admin" href="#" target="blank">web网页</a>
      </div>
      <div class="main_top_middle_num_title">案件公开数量</div>
      <div class="main_top_middle_num">
        <div class="main_top_middle_num_list">
          <img src="../../../assets/001/center_num.png" />
          <p class="main_top_middle_num_list5">6</p>
        </div>
        <div class="main_top_middle_num_list">
          <img src="../../../assets/001/center_num.png" />
          <p class="main_top_middle_num_list4">6</p>
        </div>
        <div class="main_top_middle_num_list">
          <img src="../../../assets/001/center_num.png" />
          <p class="main_top_middle_num_list3">6</p>
        </div>
        <div class="main_top_middle_num_list">
          <img src="../../../assets/001/center_num.png" />
          <p class="main_top_middle_num_list2">6</p>
        </div>
        <div class="main_top_middle_num_list">
          <img src="../../../assets/001/center_num.png" />
          <p class="main_top_middle_num_list1">6</p>
        </div>
      </div>
      <div class="main_top_middle_bottom">
        <div class="main_top_middle_bottom_echarts">
          <img src="../../../assets/001/main_top_bottom.png" />
          <div class="main_top_echarts_con">
            <div class="main_top_echarts_con_title">XX公开数量占比</div>
            <div ref="threeTasksId" class="main_top_echarts_pie"></div>
          </div>
        </div>
        <div
          class="main_top_middle_bottom_echarts main_top_middle_bottom_echarts_right"
        >
          <img src="../../../assets/001/main_top_bottom.png" />
          <div class="main_top_echarts_con">
            <div class="main_top_echarts_con_title">XX公开数量占比</div>
            <div ref="publicityId" class="main_top_echarts_pie"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="main_top_left main_top_right">
      <div class="main_top_left_top">
        <img src="../../../assets/001/main_top_left.png" />
        <div class="main_top_left_top_title">XX数据展示</div>
        <div class="main_top_left_top_con">
          <div class="main_top_left_top_con_left">
            <span class="daysData">0</span>
            <p>今日公开</p>
          </div>
          <div class="main_top_left_top_con_right">
            <span class="weekData">0</span>
            <p>本周公开</p>
          </div>
          <div class="main_top_left_top_con_list">
            <span class="monthData">0</span>
            <p>本月公开</p>
          </div>
          <div class="main_top_left_top_con_list">
            <span class="someThing">0</span>
            <p>办事指南</p>
          </div>
          <div class="main_top_left_top_con_list">
            <span class="policyData">0</span>
            <p>政策解读</p>
          </div>
        </div>
      </div>
      <div class="main_top_left_top main_top_left_bottom">
        <img src="../../../assets/001/main_top_left.png" />
        <div class="main_top_left_top_title">XXXX数量类型占比</div>
        <div ref="questionId" class="main_top_left_top_con"></div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, nextTick } from "vue";
import * as echarts from "echarts";
const baseChart = ref(null);
const publicityId = ref(null);
const threeTasksId = ref(null);
const questionId = ref(null);

let chartInstance = null;

// 初始化ECharts实例并设置配置项
onMounted(async () => {
  await nextTick(); // 确保DOM已经渲染完成
  drawBaseChart();
  drawThreeTasksChart();
  drawPublicityChart();
  drawQuestionChart();
});

// 销毁ECharts实例
onUnmounted(() => {
  if (chartInstance != null && chartInstance.dispose) {
    chartInstance.dispose();
  }
});

const drawBaseChart = () => {
  chartInstance = echarts.init(baseChart.value);
  var charts = [
    { name: "测试1", num: 200 },
    { name: "测试2", num: 300 },
    { name: "测试3", num: 400 },
    { name: "测试4", num: 500 },
    { name: "测试5", num: 300 },
  ];
  var color = [
    "rgba(100,255,249",
    "rgba(100,255,249",
    "rgba(100,255,249",
    "rgba(100,255,249",
    "rgba(100,255,249",
  ];

  let lineY = [];
  for (var i = 0; i < charts.length; i++) {
    var x = i;
    if (x > color.length - 1) {
      x = color.length - 1;
    }
    var data = {
      name: charts[i].name,
      color: color[x] + ")",
      value: charts[i].num,
      itemStyle: {
        show: true,
        color: new echarts.graphic.LinearGradient(
          0,
          0,
          1,
          0,
          [
            {
              offset: 0,
              color: color[x] + ", 0.3)",
            },
            {
              offset: 1,
              color: color[x] + ", 1)",
            },
          ],
          false
        ),
        barBorderRadius: 10,
        emphasis: {
          shadowBlur: 15,
          shadowColor: "rgba(0, 0, 0, 0.1)",
        },
      },
    };
    lineY.push(data);
  }
  var option = {
    title: {
      show: false,
    },
    grid: {
      // borderWidth: 1,
      top: "10%",
      left: "30%",
      right: "20%",
      bottom: "3%",
    },
    color: color,
    yAxis: [
      {
        type: "category",
        inverse: true,
        axisTick: {
          show: false,
        },
        axisLine: {
          show: false,
        },
        axisLabel: {
          show: false,
          inside: false,
        },
        data: charts.name,
      },
      {
        type: "category",
        inverse: true,
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          show: true,
          inside: false,
          textStyle: {
            color: "#38E1E1",
            fontSize: "8",
          },
          formatter: function (val, index) {
            return `${charts[index].num}`;
          },
        },
        splitArea: {
          show: false,
        },
        splitLine: {
          show: false,
        },
        data: charts,
      },
    ],
    xAxis: {
      // type: 'value',
      axisTick: {
        show: false,
      },
      axisLine: {
        show: false,
      },
      splitLine: {
        show: false,
      },
      axisLabel: {
        show: false,
      },
    },
    series: [
      {
        name: "",
        type: "bar",
        zlevel: 2,
        barWidth: "5px",
        data: lineY,
        animationDuration: 1500,
        label: {
          color: "white",
          show: true,
          position: [-65, -2],
          fontSize: 8,
          formatter: function (a, b) {
            return a.name;
          },
        },
      },
    ],
    animationEasing: "cubicOut",
  };
  chartInstance.setOption(option);
};

const drawPublicityChart = () => {
  var dataArr = [
    { name: "测试11", value: 300 },
    { name: "测试22", value: 500 },
    { name: "测试33", value: 400 },
    { name: "测试44", value: 350 },
    { name: "测试55", value: 363 },
    { name: "测试66", value: 800 },
  ];

  var publicitChart = echarts.init(publicityId.value);
  var data = dataArr;
  var option = {
    color: ["#38EB70", "#F7E16C", "#0EFCFF", "#FD9133", "#4D92F2"],
    tooltip: {
      trigger: "item",
      formatter: "{a} <br/>{b} : {c} ({d}%)",
    },
    legend: {
      itemWidth: 12, // 标志图形的长度
      itemHeight: 12, // 标志图形的宽度
      orient: "vertical",
      // left: 'right',
      top: "5%",
      bottom: "50%",
      x: "45%",
      textStyle: {
        color: "#fff",
        fontSize: 8,
      },
      data: data,
    },
    series: [
      // 主要展示层的
      {
        radius: ["70%", "90%"],
        center: ["25%", "50%"],
        type: "pie",
        label: {
          position: "inner",
          show: false,
        },
        name: "XX公开数量",
        data: data,
      },
      // 边框的设置
      {
        radius: ["50%", "55%"],
        center: ["25%", "50%"],
        type: "pie",
        label: {
          normal: {
            show: false,
          },
          emphasis: {
            show: false,
          },
        },
        labelLine: {
          normal: {
            show: false,
          },
          emphasis: {
            show: false,
          },
        },
        animation: false,
        tooltip: {
          show: false,
        },
        data: [
          {
            value: 1,
            itemStyle: {
              color: "rgba(250,250,250,0.3)",
            },
          },
        ],
      },
    ],
  };
  publicitChart.setOption(option);
  setInterval(function () {
    publicitChart.clear();
    publicitChart.setOption(option);
  }, 6000);
};

const drawThreeTasksChart = () => {
  let names = "666666";
  var dataArr = [
    { name: "测试11", value: 300 },
    { name: "测试22", value: 500 },
    { name: "测试33", value: 400 },
    { name: "测试44", value: 350 },
    { name: "测试55", value: 363 },
    { name: "测试66", value: 800 },
  ];
  var threeTasksChart = echarts.init(threeTasksId.value);
  var data = dataArr;
  var option = {
    color: ["#38EB70", "#2E8CFF", "#0EFCFF", "#858FF8", "#FD9133", "#F7E270"],
    tooltip: {
      trigger: "item",
      formatter: "{a} <br/>{b} : {c} ({d}%)",
    },
    legend: {
      itemWidth: 15, // 标志图形的长度
      itemHeight: 15, // 标志图形的宽度
      orient: "vertical",
      // left: 'right',
      top: "10%",
      bottom: "50%",
      x: "50%",
      textStyle: {
        color: "#fff",
        fontSize: 8,
      },
      data: data,
    },
    series: {
      name: "三务公开数量",
      type: "pie",
      animationDuration: 1500,
      radius: ["70%", "90%"],
      center: ["25%", "50%"],
      roseType: "radius",
      label: {
        normal: {
          position: "inner",
          show: false,
        },
      },
      data: data,
    },
  };
  threeTasksChart.setOption(option);
  setInterval(function () {
    threeTasksChart.clear();
    threeTasksChart.setOption(option);
  }, 6000);
};

const drawQuestionChart = () => {
  var numArr = [
    { name: "测试11", value: 300 },
    { name: "测试22", value: 500 },
    { name: "测试33", value: 400 },
    { name: "测试44", value: 350 },
    { name: "测试55", value: 363 },
    { name: "测试66", value: 800 },
  ];
  var datas = numArr;
  var questionChart = echarts.init(questionId.value);
  var option = {
    title: {
      left: "center",
    },
    tooltip: {
      trigger: "item",
      formatter: "{a} <br/>{b} : {c} ({d}%)",
    },
    color: ["#2E8CFF", "#FD9133", "#37D2D4", "#19CA88", "#858FF8"],
    legend: {
      itemWidth: 11, // 标志图形的长度
      itemHeight: 11, // 标志图形的宽度
      orient: "vertical",
      // left: 'right',
      top: "15%",
      x: "50%",
      data: datas,
      textStyle: {
        //图例文字的样式
        color: "#fff",
        fontSize: 8,
      },
    },
    series: [
      {
        name: "问题反馈",
        type: "pie",
        radius: "75%",
        center: ["20%", "50%"],
        animationDuration: 2500,
        data: datas,
        label: {
          normal: {
            position: "inner",
            show: false,
          },
        },
      },
    ],
  };
  questionChart.setOption(option);
  setInterval(function () {
    questionChart.clear();
    questionChart.setOption(option);
  }, 6000);
};
</script>

<style lang="scss" scoped></style>
